<template>
	<el-dialog
		:title="cuFromTitle"
		v-model="cuVisible"
		width="1200px"
		top="0"
		:destroy-on-close="true"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:show-close="false"
	>
		<div>
			<el-container>
				<el-header>
					<div class="left-panel">
						<el-button type="primary" plain icon="el-icon-refresh" @click="tableRefresh(true)"></el-button>
						<el-button type="primary" @click="addGoods">新增</el-button>
						<el-button
							size="mini"
							type="warning"
							:disabled="selectids.length < 1"
							@click="dels"
						>批量删除</el-button
						>
					</div>
					<div class="right-panel">
						<div class="right-panel-search">
							<el-form inline v-model="search" label-position="right">
								<el-form-item label="分类">
									<el-cascader
										v-model="search.category_id"
										:options="shopCategorys"
										:props="{
										value: 'id',
										label: 'cat_name',
										children: 'children',
										emitPath: false,
										checkStrictly: true
									}"
										clearable
									/>
								</el-form-item>
								<el-form-item label="关键词">
									<el-input v-model="search.keyWord" placeholder="请输入名称、标题等关键词" clearable></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" icon="el-icon-search" @click="onSearch"></el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</el-header>
				<el-main class="nopadding">
					<el-table
						:data="goodsData"
						style="width: 100%"
						@selection-change="selectionChange"
						max-height="650"
					>
						<el-table-column prop="id" label="ID" type="selection" width="42" />
						<el-table-column prop="cover" label="商品">
							<template #default="scope">
								<goods-info-item :row="scope.row" :baseUrl="baseUrl" />
							</template>
						</el-table-column>
						<el-table-column prop="price" label="设置内容">
							<template #default="scope">
								<el-table :data="scope.row.activity_goods">
									<el-table-column prop="title" label="规格" />
									<el-table-column prop="price">
										<template #header>
											<div class="price-header">
												<div>原价</div>
												<div>{{activityNmae}}价</div>
											</div>
										</template>
										<template #default="tscope">
											<div>{{ $TOOL.getMoneyByMinute(tscope.row.sell_price) }}</div>
											<div>{{ $TOOL.getMoneyByMinute(tscope.row.gagl_price) }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="custom_stock" label="库存策略">
										<template #default="tscope">
											{{ tscope.row.custom_stock === 1 ? "系统":"自定义" }}
										</template>
									</el-table-column>
									<el-table-column prop="stock">
										<template #header>
											<div class="price-header">
												<div>原库存</div>
												<div>{{activityNmae}}库存</div>
											</div>
										</template>
										<template #default="tscope">
											<div>{{ tscope.row.stock }}</div>
											<div v-if="tscope.row.custom_stock === 2">{{ tscope.row.gagl_stock }}</div>
											<div v-else>跟随系统</div>
										</template>
									</el-table-column>
									<el-table-column label="操作">
										<template #default="tscope">
											<el-popconfirm v-if="scope.row.activity_goods.length > 1" :title="'确认删除《'+tscope.row.title+'》规格吗？'"
														   @confirm="delOptions(tscope.row,scope.row.activity_goods)">
												<template #reference>
													<el-button type="text" size="mini">删除</el-button>
												</template>
											</el-popconfirm>
											<el-popconfirm v-if="scope.row.activity_goods.length < 2" :title="'确认删除《'+tscope.row.title+'》规格吗？'"
														   @confirm="delGoods(scope.row)">
												<template #reference>
													<el-button type="text" size="mini">删除</el-button>
												</template>
											</el-popconfirm>
										</template>
									</el-table-column>
								</el-table>
							</template>
						</el-table-column>
						<el-table-column prop="status" label="状态" width="80">
							<template #default="scope">
								{{ scope.row.status === 1 ? "上架" : "仓库" }}
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="80">
							<template #default="scope">
								<div>
									<el-button @click="editGoods(scope.$index,scope.row)" type="text" size="small">
										编辑
									</el-button>
								</div>
								<div>
									<el-popconfirm :title="'确认删除《'+scope.row.goods_name+'》商品吗？'" @confirm="delGoods(scope.row)">
										<template #reference>
											<el-button type="text" size="small">
												删除
											</el-button>
										</template>
									</el-popconfirm>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pageInfo.page_index"
						:page-sizes="[10, 20, 50, 100]"
						:page-size="pageInfo.page_size"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pageInfo.tatal_count"
						hide-on-single-page
					/>
				</el-main>
			</el-container>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="hideForm" :loading="btnLoad" size="mini">关闭</el-button>
			</div>
		</template>
	</el-dialog>
	<add-goods-box ref="addGoodsBox" @close="closeAddGoodsBox" />
	<add-goods-box-select-pop ref="addGoodsBoxSelectPop" @confirm="popConfirm" />
</template>

<script>
import {ElMessage, ElMessageBox} from "element-plus";
import AddGoodsBox from "./addGoodsBox";
import AddGoodsBoxSelectPop from "./addGoodsBoxSelectPop";

export default {
	name: "shop-goods-activity-goods",
	components: {AddGoodsBox,AddGoodsBoxSelectPop},
	props: {
		baseUrl: { type: String, default: "" }
	},
	emits: ["success"],
	data() {
		return {
			activityNmae: "拼团",
			// 如果为0时为添加
			activityId: 0,
			nowEditIndex: 0,
			btnLoad: false,
			cuVisible: false,
			selectids: [],
			shopCategorys: [],
			search: {
				keyWord: "",
				category_id: 0
			},
			defaultSearch: {
				keyWord: "",
				category_id: 0
			},
			pageInfo: {
				page_index: 1,
				page_size: 10,
				tatal_count: 0
			},
			activeName: 'include',
			form: {
				goods_type: 0,
				goods_name: ""
			},
			goodsData: [],
		};
	},
	computed: {
		cuFromTitle() {
			return "活动商品";
		}
	},
	mounted() {
		this.getsShopCategorys()
	},
	methods: {
		hideForm() {
			this.cuVisible = false;
		},
		show(_activityId) {
			// this.getData(_activityId);
			this.activityId = _activityId;
			this.tableRefresh();
			this.cuVisible = true;
		},
		getData(_activityId) {
			this.$API.shop.goodsActivity
				.info({ id: _activityId })
				.then((res) => {
					console.log(res);
					if (res.code === 0) {
						console.log(res.data);
					}
					else{
						this.$message.error(res.message);
					}
				})
				.catch((err) => {
					ElMessage.error("失败," + err);
				});
		},
		getGoodsData() {
			this.$API.shop.goodsActivityGoodsList
				.page({
					activity_id: this.activityId,
					page: this.pageInfo.page_index,
					page_size: this.pageInfo.page_size,
					...this.search
				})
				.then((res) => {
					console.log(res);
					if (res.code === 0) {
						this.pageInfo.page_index = res.data.page_info.page;
						this.pageInfo.page_size = res.data.page_info.size;
						this.pageInfo.tatal_count = res.data.page_info.total;
						this.goodsData = res.data.list;
					}
					else {
						this.$message.error(res.message);
					}
				});
		},
		selectionChange(val) {
			this.selectids = val;
		},
		closeAddGoodsBox() {
			this.tableRefresh();
		},
		tableRefresh() {
			this.search = { ...this.defaultSearch };
			this.getGoodsData();
		},
		onSearch() {
			this.getGoodsData();
		},
		handleSizeChange(_val) {
			this.pageInfo.page_size = _val;
			this.getGoodsData();
		},
		handleCurrentChange(_val) {
			this.pageInfo.page_index = _val;
			this.getGoodsData();
		},
		getsShopCategorys() {
			this.$API.shop.category
				.list({
					type_str: "shop"
				})
				.then((res) => {
					this.shopCategorys = this.$TOOL.deepTree(res.data, "parent_id");
				});
		},
		dels() {
			let tmpIds = this.selectids.map((e) => e.id);
			if (tmpIds.length < 1) {
				ElMessage.error("请选择需要删除的项");
				return;
			}
			ElMessageBox.confirm("确认删除吗？", "提示", { type: "warning" })
				.then(() => {
					this.batchDelGoods(tmpIds);
				})
				.catch(() => {});
		},
		addGoods() {
			this.$refs.addGoodsBox.show(this.activityId);
		},
		delOptions(row,options){
			this.$API.shop.goodsActivityGoodsList.delete({ids: [row.gagl_id]}).then(res=>{
				if(res.code === 0){
					this.$message.success("删除成功");
					// this.getGoodsData();
					const ii = options.findIndex(e=>e.gagl_id === row.gagl_id);
					options.splice(ii, 1);
				}
				else{
					this.$message.error(res.message);
				}
			});
		},
		editGoods(index,row){
			this.nowEditIndex = index;
			this.$refs.addGoodsBoxSelectPop.show(this.activityId,row.id, row.goods_name);
		},
		batchDelGoods(ids){
			this.$API.shop.goodsActivityGoodsList.delGoods({ids: ids}).then(res=>{
				if(res.code === 0){
					this.$message.success("删除成功");
					this.getGoodsData();
				}
				else{
					this.$message.error(res.message);
				}
			});
		},
		delGoods(row){
			this.batchDelGoods([row.id]);
		},
		popConfirm(goods){
			this.goodsData[this.nowEditIndex].activity_goods = goods;
		},
	}
};
</script>

<style lang="scss" scoped>
.select-trigger.el-tooltip__trigger.el-tooltip__trigger{
	position: relative;
}
</style>
